<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/public.css" />
<script type="text/javascript" src="${contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/common.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrapValidator.min.js"></script>
<style type="text/css">
#login input{
    height: 50px;
    line-height: 50px;
}
#login input{
	font-size: 16px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<section>
				<div style="padding: 100px 300px 10px;">
					<div class="page-header">
						<h2>登录</h2>
						系统推荐使用：谷歌浏览器
						<a style="color: red;" href="https://dl.google.com/release2/chrome/AItQ7_3tBaja_72.0.3626.96/72.0.3626.96_chrome_installer.exe">点击下载浏览器</a>
					</div>
					<div class="form-group" style="color: red;" align="center">${message}</div>
					<form action="${contextPath}/login" method="post" id="login" name="login" role="form" class="bs-example bs-example-form">
						<div class="">
							<div class="input-group">
								<span class="input-group-addon">
									<strong>账&nbsp;&nbsp;&nbsp;号</strong>
								</span>
								<input type="text" id="username" name="username" required="required" placeholder="用户名" class="form-control">

								<!-- /btn-group -->
							</div>
							<!-- /input-group -->
						</div>
						<br>
						<!-- 密码---------------------------------------------- -->
						<div class="">
							<div class="input-group">
								<span class="input-group-addon">
									<strong>密&nbsp;&nbsp;&nbsp;码</strong>
								</span>
								<input type="password" id="pwd" AUTOCOMPLETE="off" required="required" placeholder="密 码" name="password" class="form-control">

								<!-- /btn-group -->
							</div>
							<!-- /input-group -->
						</div>
						<br>
						<!-- 验证码---------------------------------------------- -->
						<!-- 
						<div class="">
							<div class="input-group">
								<span class="input-group-addon">
									<strong>验证码</strong>
								</span>
								<input type="text" id="checkCode" id="checkCode" AUTOCOMPLETE="off" maxlength="4" required="required" placeholder="验证码" name="checkCode" class="form-control">
								<div class="input-group-btn">
									<img onclick="javascript:this.src='${contextPath}/kaptcha/render?'" src="${contextPath}/kaptcha/render" style="" />
								</div>
							</div>
						</div>
						 -->
						<br>
						<div class="">
							<div class="form-group">
								<button type="submit" class="btn btn-lg btn-primary btn-block" id="loginBtn">登录</button>
							</div>
						</div>
					</form>
				</div>
			</section>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			/**
			$("#username").blur(function() {
				checkUserName();
				var user = $("#username");
				var userValue = user.val();
				$.ajax({
					type : 'post',
					url : '${contextPath}/checkUserName',
					data : "username=" + userValue,
					dataType : 'json',
					success : function(data) {
						if (data.status == true) {
							user.next(".help-block").removeClass("text-success").addClass("text-danger").text(data.message);
						} else {
							user.next(".help-block").removeClass("text-danger").addClass("text-success").text(data.message);
						}
					}
				});
			});
			 **/

			//==================================================================================================================
			$('#login').bootstrapValidator({
				live : 'enabled',
				submitButtons : 'button[type="submit"]',
				message : 'This value is not valid',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					username : {
						validators : {
							notEmpty : {
								message : '账号不能为空'
							}
						}
					},
					password : {
						validators : {
							notEmpty : {
								message : '密码不能为空'
							}
						}

					}
					/**
					checkCode : {
						validators : {
							notEmpty : {
								message : '验证码不能为空'
							},
							stringLength : {
								min : 4,
								message : '验证码不能低于6位'
							}
						}

					}
					**/
				}
			});

			//$('#addCustomer').bootstrapValidator();
			$('#loginBtn').click(function() {
				var bootstrapValidator = $('#login').data('bootstrapValidator');
				//手动触发验证
				bootstrapValidator.validate();
				if (bootstrapValidator.isValid()) {
					//表单提交的方法、比如ajax提交
					login.submit();
				}

			});

		});
	</script>
</body>

</html>
